<template>
  <div class="cart">
    <Header></Header>
    <!-- 未登录进入购物车 -->
    <NoLogin v-if="!loginStatus" />
    <!-- 判断购物车是否为空进行切换组件 -->
    <Nothing v-if="list.length === 0" />
    <!-- 登录后进入购物车 -->
    <ShopCard :values="list" />

    <div class="footer">
      <van-submit-bar
        :price="total.price * 100"
        button-text="提交订单"
        @submit="onSubmit"
        v-if="loginStatus"
      >
        <van-checkbox :value="isCheckAll" @click="checkAllFn"
          >全选</van-checkbox
        >
      </van-submit-bar>
    </div>
    <!-- <Tabber></Tabber> -->
  </div>
</template>

<script>
import Header from "@/views/Cart/Header"
import NoLogin from "@/components/cart/NoLogin"
import Nothing from "@/components/cart/Nothing"
import ShopCard from "@/components/cart/ShopCard"
import { mapMutations, mapGetters, mapState, mapActions } from "vuex"
import { Toast } from "vant"

export default {
  components: {
    Header,
    NoLogin,
    Nothing,
    ShopCard,
  },

  created() {
    // 执行vuex数据读取是否登录

    this.userInit()
    // 执行数据插入到数据库
    // console.log(this.$route.query)
    // this.saveShopMessage()
    this.selectUserCart()
  },

  data() {
    return {
      checked: true,
      values: {},
      params: {
        orderID: "",
        totalPrice: "",
        values: [],
      },
    }
  },

  methods: {
    onSubmit() {
      if (!this.selectList.length) {
        Toast("请选择商品")
      } else {
        let newList = []
        this.list.forEach((item) => {
          this.selectList.filter((v) => {
            if (v == item.id) {
              newList.push(item)
            }
          })
        })

        new Promise((reslove, reject) => {
          /*这是雪花算法生成订单号*/
          this.$api.cart
            .orderShop(newList)
            .then((res) => {
              console.log(res)
              this.params.orderID = res.id
              this.params.totalPrice = this.total.price
              this.params.values = newList
              reslove()
            })
            .then(() => {
              // Toast("订单生成成功，请到订单去支付")
              this.$router.push("/order")
            })
        })
      }
    },

    // 查询该用户的购物车信息
    selectUserCart() {
      if (!this.loginStatus) return
      this.$api.cart.selectUserCart().then((res) => {
        // 将返回的数据保存到vuex中即可，再渲染

        res.data.forEach((item) => {
          item["checked"] = true
        })
        console.log(res)
        this.cartList(res.data)
      })
    },

    ...mapMutations([
      "loginOut",
      "userInit",
      "cartList",
      "checkAll",
      "checkItem",
    ]),
    ...mapActions(["checkAllFn"]),
  },

  computed: {
    ...mapState({
      loginStatus: (state) => state.user.loginStatus,
      userInfo: (state) => state.user.userInfo,
      list: (state) => state.cart.list,
      selectList: (state) => state.cart.selectList,
    }),
    ...mapGetters(["isCheckAll", "total"]),
  },
}
</script>

<style lang="less" scoped>
.cart {
  width: 100vw;
  height: 100vh;
  background-color: rgb(240, 240, 240);
}
</style>
